$.GWT = {};
$.GWT.UI = {};
$.GWT.UI.progressBar = {
    defaults: {
        id:'progressBar',
        progressValue:20,
        initStatus: '进行中...', //状态
        speed: 3, //秒数,默认3s
        layerOpen: false
    },
    create: function (options) {
        var self = this;
        var settings = $.extend({}, self.defaults, options);
        var progressBar = new $.GWT.UI.progressBar.Constructor(settings);
        progressBar.init(settings);
        return progressBar;
    }
}


$.GWT.UI.progressBar.Constructor = function (options) {
    this.settings = options;
}

$.GWT.UI.progressBar.Constructor.prototype = {

    init: function(options) {
        var setting = $.extend({}, this.defaults, options);
        this.createDom(setting.id,setting.layerOpen);
        this.moveTo(0, setting.initStatus,setting.speed);
    },

    update:function(value,status,speed){
        this.moveTo(value,status,speed);
    },
    createDom: function(id,layerOpen) {

        //基本结构创建
        var html = '';
        var lineWidth;
        html += '<div class="barline" id="probar">';
        html += '<div id="percent"></div>';
        html += '<div id="line" style="width:0px;"></div>';
        html += '<div id="msg" style="">开始</div>';
        html += '</div>';
        $("#"+id).addClass('progressBar').append(html);
      
        //是否使用弹窗
        if (layerOpen) {
            $('.progressBar').hide();
            layer.open({
                type: 1,
                skin: 'none', //加上边框
                area: ['538px', '385px'], //宽高
                content: $('.progressBar')
            });
        } else {
            $('.progressBar').show();
        }
    },
    moveTo:function(value,status,speed){

        var lineWidth;
        //设置状态文字
        $('#msg').text(status);

        //设置
        $('.progressBar #percent').text(value + "%");
            $('.progressBar .barline #line').animate({
            width: value + "%"
        }, speed * 1000/value);

        window.setInterval(function() {
            lineWidth = $(".progressBar #line").width();
            $('.progressBar #percent').css({
                left: lineWidth
            });
        },speed * 1000/value);
    }

}























// $.GWT = {};
// $.GWT.UI = {};
// $.GWT.UI.progressBar = {
//     defaults: {
//         id:'progressBar',
//         startValue:0,
//         endvalue: 60, //进度值
//         status: '进行中...', //状态
//         speed: 3, //秒数,默认3s
//         layerOpen: true,
//         update:function(){
//             alert("默认设置");
//         }
//     },
//     init: function(options) {
//         var setting = $.extend({}, this.defaults, options);
//         this.create(setting.id,setting.layerOpen);
//         this.setProgress(setting.startValue,setting.endvalue, setting.status,setting.speed,setting.update);
//     },
//     create: function(id,layerOpen) {
//     	//基本结构创建
//         var html = '';
//         var lineWidth;
//         html += '<div class="barline" id="probar">';
//         html += '<div id="percent"></div>';
//         html += '<div id="line" style="width:0px;"></div>';
//         html += '<div id="msg" style="">开始</div>';
//         html += '</div>';
//         $("#"+id).addClass('progressBar').append(html);
      
//         //是否使用弹窗
//         if (layerOpen) {
//             $('.progressBar').hide();
//             layer.open({
//                 type: 1,
//                 skin: 'none', //加上边框
//                 area: ['538px', '385px'], //宽高
//                 content: $('.progressBar')
//             });
//         } else {
//             $('.progressBar').show();
//         }
//     },
//     setProgress:function(startValue,endvalue,status,speed,callback){
//         //组件数值初始化
//         var i=startValue;
//         var end=setInterval(function(){
//             if(i>endvalue){
//                 clearInterval(end);
//                  $('#msg').text(status);
//                 callback();
//             }
//             $('#percent').text(i + "%");
           
//             i++;
//         },speed * 1000/(endvalue-startValue));

     

//         $('.barline #line').animate({
//             width: endvalue + "%"
//         }, speed * 1000);

//         window.setInterval(function() {
//             lineWidth = $("#line").width();
//             $('#percent').css({
//                 left: lineWidth
//             });
//         }, 100);
//     }
// }